<template>
  <div id="tarbar">
    <tarbaritem :path="home">
      <img src="../../../../assets/img/home.svg" slot="left" />
      <img src="../../../../assets/img/home.active.svg" slot="center" />
      <span slot="right">首页</span>
    </tarbaritem>
    <tarbaritem :path="catalogue">
      <img src="../../../../assets/img/catalogue.svg" slot="left"/>
      <img src="../../../../assets/img/catalogue.active.svg" slot="center"/>
      <span slot="right">分类</span>
    </tarbaritem>
    <tarbaritem :path="shopping">
      <img src="../../../../assets/img/shopping.svg" slot="left"/>
      <img src="../../../../assets/img/shopping.active.svg" slot="center"/>
      <span slot="right">购物车</span>
    </tarbaritem>
    <tarbaritem :path="me">
      <img src="../../../../assets/img/me.svg" slot="left"/>
      <img src="../../../../assets/img/me.active.svg" slot="center"/>
      <span slot="right">我的</span>
    </tarbaritem>
  </div>
</template>

<script>
import tarbaritem from "../tabbaritem/tabbaritem.vue";
export default {
  data(){
    return{
      home:'/home',
      catalogue:'/catalogue',
      shopping:'/shopping',
      me:"/me"
    }
  },
  components: {
    tarbaritem,
  }
};
</script>

<style>

#tarbar {
  background-color: #fff;
  display: flex;
  text-align: center;
  height: 49px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
